<template>
  <div class="our-blog">
      <div class="our-blog-box">
          <div class="our-blog-title">
              <p><span>我们的博客</span></p>
              <section>来自我们的最新消息</section>
          </div>
          <div class="our-blog-carousel">
              <el-carousel :interval="4000" type="card"  height="350px">
                <el-carousel-item  v-for="item in imgs" :key="item.index">
                    <div class="filter-father" style="position:relative;">
                        <img :src="item.src" alt="">
                        <div class="filter">
                            <p><span>{{item.title}}</span></p>
                            <section>{{item.message}}</section>
                        </div>
                    </div>   
                </el-carousel-item>
              </el-carousel>
          </div>
          <div class="our-blog-button">
              <a>More</a>
          </div>
      </div>
  </div>
</template>
<script>
    export default {
        data(){
            return{
                imgs:[
                    {src:require('../assets/images/blog1.jpg'),title:'农业历史',message:'最常称之为农作物除尘器，农用飞机还具有许多其它功能能来帮助农民。虽然大多数农作物用于喷洒农作物。'},
                    {src:require('../assets/images/blog2.jpg'),title:'三大有机水果种植',message:'在这篇分文章中，我们收集了最受欢迎的水果，你真的应该变得有机，因为它们在传统上买下了最大的化学残留量。'},
                    {src:require('../assets/images/blog3.png'),title:'有机农业史',message:'在广义上，有机农作的历史可追溯到数千年前由史前人类建成的第一个初创农场。'}
                ],
            }
        },
    }
</script>
<style scoped>

p{margin: 0;padding: 0;}
    .our-blog-box{
        width: 1200px;
        margin: 20px auto 70px auto;
    }
    .our-blog-title{
        text-align: center;
    }
    .our-blog-title p{
        font-size: 30px;
        color: rgb(51, 51, 51);
    }
    .our-blog-title section{
        font-size: 14px;
        color: rgba(31,37,38,.75);
        line-height: 1.7;
    }
    .our-blog-carousel{
        margin-top: 40px;
    }
    .our-blog-carousel img{
        width: 100%;
    }
    
    .our-blog-button{
        margin:30px 0;  
        text-align: center;
    }
    .our-blog-button a{
        font-size: 14px;
        padding: 10px 30px;
        border: 1px solid;
        background: #69ca72;
        color: white;
        border-radius: 100px;
    }
    .filter-father:hover .filter{
        bottom: 0;
        animation-duration: .5s;
        animation-name: slideInUp;
    }
    .filter{
        width: 100%;
        height: 40%;
        position: absolute;
        background: rgba(0, 0, 0,.5);
        color: white;
        padding-bottom: 20px;
        transition: all 0.3s ease-out;
    }

    .filter p{
        font-size: 20px;
        margin: 10px 0;
    }
    .filter section{
        font-size: 14px;
    }
</style>
